<template>
    <div class="askLeaveQueryTab">

       <div class="searchResult">
                <van-empty description="暂无干部请假信息" v-if="nodata"/>

                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!nodata">
                    <div class="asynDate" v-if="asynDate  " style="margin-bottom: 0;">
                        数据更新日期：{{ asynDate }}<br/>
                        <span class="asynDateDesc">按请假离校日期排序</span>
                    </div>
                    <van-list
                        class="searchResultList" 
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >

                    
                    
                    <div v-for="item in list">
                        <ListGroupFlag :text="item.college_name" v-if="item.groupFlag"/>
                        <ColorItem :color="getColor(item)" class="searchItem" :color-border="false" v-else>
                            <AskLeaveLog :color="getColor(item)" :item="item" @detail-popup="handleDetailPopup" hideApostLevel/>                        
                        </ColorItem>
                    </div>

                    
                    </van-list>
                </van-pull-refresh>
 
        </div>

        
    </div>
    <VanBackTop v-if="showBackTop" />
</template>
<script lang="ts" setup>
import AskLeaveLog from '@/components/AskLeaveLog.vue';
import ColorItem from '@/components/ColorItem.vue';
import { onActivated, onMounted, ref ,watch} from 'vue';
import { type AskLeave } from '@/types/common';
import http from '@/api/request'
import ListGroupFlag from '@/components/listGroupFlag.vue';
import { groupAskLeaveList } from '@/service/AskLeaveService';
interface AskLeaveList{
    list:AskLeave[]
    asynDate?:string
}

const props =  defineProps({
    staffId:String
})

const loading = ref(false)
const finished = ref(false)
const list = ref<AskLeave[]>([]);
const nodata = ref(false);
const asynDate = ref();
const showBackTop = ref(true);

const refreshing = ref(false)

var pageNo = 1;
 
    onMounted(()=>{
        getList()
    })

    onActivated(()=>{        
        window.scroll(0,0)
        //getList()

    })

    watch(()=>props.staffId,()=>{
        finished.value = false;
        pageNo = 1;
        getList();
    });

const handleDetailPopup = (isShow:boolean)=>{
    showBackTop.value = !isShow;
}


const getList = ()=>{
    
    http.get<AskLeaveList>('/askleave/dataListById',{
        pageNo,key:props.staffId
    }).then((resp)=>{
        refreshing.value=false;
        loading.value=false;

        if(pageNo ==1) list.value=[];

        asynDate.value = resp.data?.asynDate;
        if(resp.data?.list){
            if(resp.data.list.length > 0){

                var temp = list.value.concat( resp.data.list);
                list.value = temp;

                //group list
                temp = groupAskLeaveList(temp);
                list.value = temp;

            }else{
                finished.value = true;
                if(pageNo == 1){
                    nodata.value = true;
                }
            }
            
        }else{
            finished.value=true;
        }
    })
}

const onLoad = ()=>{
    if(pageNo ==1 && list.value.length == 0){ //初始化，不加载
        loading.value=false;
        return;
    }

    pageNo++;
    getList();
}

const onRefresh = ()=>{
    pageNo = 1;
    finished.value=false;
    getList();
}

const getColor = (item:AskLeave)=>{
    
    if(item.post_level == '1')return 'red'
    if(item.post_level == '2')return '#1976D2'
    if(item.post_level == '3')return '#3390ff'
    return '#3390ff'
}
</script>

<style lang="less" scoped>
.askLeaveQueryTab{

    min-height: 100vh;
    padding-top: 0px;


    .asynDate{
            text-align: center;
            padding:10px;
            font-size: 14px;
    }
  
    .searchPart{        
        background-color: #fff;
        margin:0px;
        margin-top: 20px;
        
        padding-top: 20px;

        .search{
            margin-top: 10px;
        }
    }
    
    .searchResultList{
        .searchItem{
            margin-bottom: 6px;
        }
    }

    .subSection{
        line-height: 30px;
    }

    .searchResult{        
        margin:10px;
        .searchItem{
            background-color: #fff;
        }
    }
}

</style>

 